<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOGA会馆</title>
    <link rel="stylesheet" href="./css/home.css"> 
</head>
<body>
    <div class="ad">
        <img src="img/美化登录页面.png"
            alt="禅心瑜伽会馆宣传图">
    </div>
    
    <div class="yoga-courses">
        <div class="head clear">
            <ul class="order">
                <li class="active" data-order='com'>综合</li>
                <li data-order="new">最新课程</li>
                <li data-order="hot">热门课程</li>
            </ul>
            <div class="more">
                <div class="icon">
                    查看全部课程 >
                </div>
            </div>
        </div>
    
        <ul class="list clear">
            <li>
                <div class="course-img">
                    <img src="https://images.unsplash.com/photo-1551028719-00167b16eac5?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
                        alt="哈他瑜伽">
                </div>
                <div class="course-info">
                    <div class="course-title">哈他基础瑜伽</div>
                    <div class="course-teacher">导师：林静</div>
                    <div class="course-time">时长：60分钟 | 难度：初级</div>
                </div>
            </li>
            <li>
                <div class="course-img">
                    <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
                        alt="流瑜伽">
                </div>
                <div class="course-info">
                    <div class="course-title">活力流瑜伽</div>
                    <div class="course-teacher">导师：张明</div>
                    <div class="course-time">时长：75分钟 | 难度：中级</div>
                </div>
            </li>
            <li>
                <div class="course-img">
                    <img src="https://images.unsplash.com/photo-1592107761269-612571895e84?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
                        alt="阴瑜伽">
                </div>
                <div class="course-info">
                    <div class="course-title">静心阴瑜伽</div>
                    <div class="course-teacher">导师：王琳</div>
                    <div class="course-time">时长：90分钟 | 难度：初级</div>
                </div>
            </li>
            <li>
                <div class="course-img">
                    <img src="https://images.unsplash.com/photo-1547157044-167e50611d90?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
                        alt="空中瑜伽">
                </div>
                <div class="course-info">
                    <div class="course-title">空中瑜伽塑形</div>
                    <div class="course-teacher">导师：刘芳</div>
                    <div class="course-time">时长：70分钟 | 难度：高级</div>
                </div>
            </li>
        </ul>
    </div>
    <script src="./js/home.js"></script>
</body>
<div class="container" id="footer-nav" style="max-width:400px;margin:24px auto 0 auto;padding:12px 0 0 0;text-align:center;background:none;box-shadow:none;">
    <a href="home.html" style="margin:0 12px;color:#6bc1b6;text-decoration:none;font-size:18px;font-weight:bold;">首页</a>
    <a href="index.html" style="margin:0 12px;color:#6bc1b6;text-decoration:none;font-size:18px;">课程</a>
    <a href="message.html" style="margin:0 12px;color:#6bc1b6;text-decoration:none;font-size:18px;">消息</a>
    <a href="my.html" style="margin:0 12px;color:#6bc1b6;text-decoration:none;font-size:18px;">个人中心</a>
</div>
</body>
</html>